<template>
    <div class="dropdown" :class="{active:visible}" @click="handleClick" v-clickoutside="hide">
        <slot/>
        <slot name="dropdown"/>
    </div>
</template>

<script>

    import Clickoutside from '../utils/clickoutside';
    import Emitter from '../mixins/emitter';

    export default {
        name: "ep-drop-down",
        data() {
            return {
                visible: false,
            }
        },
        mixins:[
          Emitter
        ],
        directives:{
          Clickoutside
        },
        watch: {
            visible(val) {
                this.broadcast('ep-drop-down-menu', 'visible', val);
                this.$emit('visible-change', val);
            },
        },
        methods: {
            handleClick() {
                if(this.visible){
                    this.hide()
                }else {
                    this.show()
                }
            },
            show() {
                this.visible = true
            },
            hide() {
                this.visible = false
            }
        }
    }
</script>

<style  lang="scss">
    .dropdown {
        position: relative;
        overflow: visible;
        display: inline-block;
        cursor: pointer;
    }
</style>
